<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
      </div>
      <!-- 搜索区域 -->
      <div class="search-box">
        <el-form :inline="true" :model="p" ref="form">
          <el-form-item label="文章分类">
            <el-select
              v-model="p.cate_id"
              placeholder="请选择分类"
              size="small"
            >
              <el-option
              v-for="item in artData"
              :key="item.id"
              :label="item.cate_name"
              :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" style="margin-left: 15px">
            <el-select v-model="p.state" placeholder="请选择状态" size="small">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="screen">筛选</el-button>
            <el-button type="info" size="small" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 发表文章的按钮 -->
        <el-button
          type="primary"
          size="small"
          class="btn-pub"
          @click="dialogVisible = true"
          >发表文章</el-button
        >
      </div>

      <!-- 文章表格区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="文章标题" width="180">
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" width="180">
        </el-table-column>
        <el-table-column prop="address" label="发表时间">
          <template v-slot="{ row }">
            {{ formTime(row.pub_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template v-slot="{ row }">
              <el-button type="danger" size="mini" @click="delArt(row.id)">删除</el-button>
          </template>
        </el-table-column>
        <!-- {{formTime()}} -->
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 发布对话框   分隔一下，提高阅读性 -->
    <open-list
      :dialogVisible="dialogVisible"
      @open="open"
      @submitArtList="submitArtList"
      :artData="artData"
    />
  </div>
</template>

<script>
import { addArticle, getArtList, getList, delArt } from 'network/menus'
import OpenList from './artListChild/openList.vue'
import dayjs from 'dayjs'

export default {
  name: 'ArtList',
  data () {
    return {
      dialogVisible: false,
      ruleForm: {},
      // 查询参数对象
      q: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      p: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      tableData: [],
      total: 0,
      artData: []
    }
  },
  components: {
    OpenList
  },
  methods: {
    // 打开对话框
    open (val) {
      this.dialogVisible = val
    },
    // 发布/草稿文章
    async submitArtList (data) {
      const { data: res } = await addArticle(data)
      if (res.code !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.dialogVisible = false
      this.getTableData()
    },
    // 获取文章
    async getTableData () {
      const { data: res } = await getArtList(this.q)
      if (res.code !== 0) return
      this.tableData = res.data
      this.total = res.total
    },
    async getArtList () {
      // 获取所有分类列表
      const { data: res } = await getList()
      if (res.code !== 0) return
      this.artData = res.data
    },
    // 格式化日期
    formTime (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 当页码大小被改变时触发
    handleSizeChange (val) {
      this.q.pagesize = val
      this.getTableData()
    },
    // 当前页被改变时触发
    handleCurrentChange (val) {
      this.q.pagenum = val
      this.getTableData()
    },
    // 筛选重置
    reset () {
      this.p.cate_id = ''
      this.p.state = ''
      this.q.cate_id = ''
      this.q.state = ''
      this.getTableData()
    },
    // 筛选
    screen () {
      for (const key in this.p) {
        this.q[key] = this.p[key]
      }
      this.getTableData()
    },
    // 删除
    async delArt (id) {
      const { data: res } = await delArt({ id })
      if (res.code !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      if (this.tableData.length === 1) this.q.pagenum > 1 && this.q.pagenum--
      this.getTableData()
    }
  },
  created () {
    // 获取文章
    this.getTableData()
    this.getArtList()
  }
}
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .btn-pub {
    margin-top: 5px;
  }
}
</style>
